@define-color gray #24283b;
@define-color light_gray #373B41;

@define-color black #222222;
@define-color white #fff;
@define-color blue #7aa2f7;
@define-color green #bbffb9;
@define-color red #F56C6C;
@define-color orange #ff9e64;
@define-color yellow #e0af68;
@define-color pink #bb9af7;
@define-color syan #01ffff;

@define-color disabled #707880;
@define-color theme #9999ff;

* {
    font-size: 16px;
    font-weight: 400;
    font-family: "DejaVu Sans Mono","Symbols Nerd Font";
}

window#waybar {
    all: unset;
}

.modules-left {
    padding: 5px 0px;
    border-radius: 6px;
    margin-left: 6px;
    background-color: transparent;
}

.modules-right {
    padding: 5px 0px;
    border-radius: 6px;
}

.modules-center {
    border-radius: 8px;
}

.modules-right {
    margin-right: 6px;
}

/* =================================== */
/* 工作区域tag */
/* =================================== */
#workspaces {
    padding: 0;
    margin: 0;
}

#workspaces {
  padding: 0 9px;
  border-radius: 6px;
}

#workspaces button {
  all: initial;
  /* Remove GTK theme values (waybar #1351) */
  padding: 9px;
  /* border-bottom: 3px solid transparent; */
}

/* 每个窗口当有内容时tag的颜色 */
#workspaces button:nth-child(1) {
  color: @blue;
}

#workspaces button:nth-child(2) {
  color: @pink;
}

#workspaces button:nth-child(3) {
  color: @red;
}

#workspaces button:nth-child(4) {
  color: @green;
}

#workspaces button:nth-child(5) {
  color: @yellow;
}

#workspaces button:nth-child(6) {
  color: @syan;
}

#workspaces button:nth-child(7) {
  color: @orange;
}

#workspaces button:nth-child(8) {
  color: @white;
}

#workspaces button:nth-child(9) {
  color: @white;

}

#workspaces button:nth-child(10) {
  color: @white;

}

/* 当前窗口tag样式 */
#workspaces button.active {
  background-color: @light_gray;
}

#workspaces button.active:nth-child(1) {
  border-bottom: 3px solid @blue;
}

#workspaces button.active:nth-child(2) {
  border-bottom: 3px solid @pink;

}

#workspaces button.active:nth-child(3) {
  border-bottom: 3px solid @red;
}

#workspaces button.active:nth-child(4) {
  border-bottom: 3px solid @green;
}

#workspaces button.active:nth-child(5) {
  border-bottom: 3px solid @yellow;
}

#workspaces button.active:nth-child(6) {
  border-bottom: 3px solid @syan;
}

#workspaces button.active:nth-child(7) {
  border-bottom: 3px solid @orange;

}

#workspaces button.active:nth-child(8) {
  border-bottom: 3px solid @white;

}

#workspaces button.active:nth-child(9) {
  border-bottom: 3px solid @white;

}

#workspaces button.active:nth-child(10) {
  border-bottom: 3px solid @white;

}

/* 鼠标选择时候的样式 */
#workspaces button:hover {
  background-color: @light_gray;
  border-bottom: 3px solid @disabled;

}

#workspaces button.empty.active {
  color: @disabled;
  border-bottom: 3px solid @disabled;

}

/* 空tag的样式 */
#workspaces button.empty {
  color: @disabled;
}

/* 空tag的样式 */


/* 有新提示内容的tag */
#workspaces button.urgent {
  background-color: @light_gray;
  color: @red;
  border-bottom: 3px solid @red;
}

#clock,
#tray,
#network,
#backlight,
#pulseaudio,
#battery,
#cpu,
#memory,
#custom-expand,
#custom-ip,
#custom-bg,
#custom-picker,
#custom-clock {
    padding: 0px 6px;
    background-color: transparent;
    font-size: 16px;
    color: #dddddd;
}

#network,
#tray,
#backlight,
#pulseaudio,
#battery,
#cpu,
#custom-ip,
#custom-bg,
#custom-picker,
#custom-clock {
    font-size: 20px;
}

#network:hover,
#clock:hover,
#tray:hover,
#backlight:hover,
#pulseaudio:hover,
#battery:hover,
#cpu:hover,
#memory:hover,
#custom-expand:hover,
#custom-ip:hover,
#custom-bg:hover,
#custom-picker:hover,
#custom-clock:hover {
    color: @white;
}

#custom-expand {
    padding: 0px 5px;
    color: alpha(@foreground, .2);
    text-shadow: 0px 0px 2px rgba(0, 0, 0, .7);
    transition: all .3s ease;
}

#custom-expand:hover {
    color: rgba(255, 255, 255, .2);
    text-shadow: 0px 0px 2px rgba(255, 255, 255, .5);
}

#custom-bg {
    font-size: 17px;
}
#custom-picker {
    font-size: 17px;

}
#custom-clock {
    font-size: 19px;
}

#clock {
    color: #dddddd;
}

#memory {
    color: #dddddd;
    
}

#battery {
    padding-right: 12px;
}

tooltip {
    background: @gray;
    color: @white;
    border: 2px solid @red;
    border-radius: 4px;
    margin: 20px;
}

/* 滑槽：10个灰色方块背景 */
#backlight-slider trough {
    min-height: 8px;
    min-width: 100px;
    border-radius: 4px;
    background-color: transparent;
    background-image: 
        linear-gradient(90deg, 
            #555 0%, #555 90%,   /* 未激活方块颜色 */
            transparent 90%, transparent 100% /* 方块间距 */
        );
    background-size: 10% 100%;   /* 每个方块宽度10% */
    background-repeat: repeat-x;
    border:none;

}

/* 激活填充层：离散白色方块 */
#backlight-slider highlight {
    min-height: 8px;
    border-radius: 0;
    background-color: transparent; /* 禁用纯色填充 */
    background-size: 10% 100%;   /* 方块尺寸与滑槽一致 */
    background-color: @disabled;
    background-repeat: repeat-x;
    border:none;
    border-radius: 4px;

}

/* 隐藏原生滑块 */
#backlight-slider slider {
    opacity: 0;
    min-height: 0;
    min-width: 0;
    background-color: red;
}
